<template>
	<view class="ksd-loading" @click="closeMe" :class="[bottom>-1?'fixed':'']" :style="{'bottom':bottom+'px'}" v-show="hideLoading">
		<text>{{loadingText[loadType]}}</text>
	</view>
</template>

<script>
	export default {
		name:"pug-loading",
		props:{
			bottom:{
				type:Number,
				default:0
			},
			loadType:{
				type:Number,
				default:0,
			},
			loadingText:{
				type:Array,
				default:["数据加载中","数据加载完毕","没有更多了..."]
			}
		},
		watch:{
			'loadType':function(newVal){
				if(newVal>0){
					// 如果监听loadType>0，然后在2000之后执行隐藏
					if(this.timer)clearTimeout(this.timer);
					this.timer = setTimeout(()=>{
						this.hideLoading = false;
					},3000);
				}else{
					if(this.timer)clearTimeout(this.timer);
					// 如果监听loadType==0，需要显示出来
					this.hideLoading = true;
				}
			}
		},
		data() {
			return {
				hideLoading:true
			};
		},
		methods:{
			closeMe(){
				this.hideLoading = false;
			}
		}
	}
</script>

<style>
	.ksd-loading{padding:60rpx 0;display: flex;justify-content: center;}
	.ksd-loading.fixed{position:fixed;right:0;left:0;background:#fff;padding:8rpx;}
	.ksd-loading text{font-size:24rpx;color: #999;font-weight: 600;}
</style>
